<template>
  <div class="profile-account">
    <div class="item">
      <i class="fa-brands fa-qq" style="color: #0d9488"></i>
      <div class="content">
        <span>绑定QQ</span>
        <span>当前未绑定微信账号</span>
      </div>
      <el-button type="primary" text @click="changeAccount('QQ')">更换绑定</el-button>
    </div>

    <div class="item">
      <i class="fa-brands fa-weixin" style="color: #0d9488"></i>
      <div class="content">
        <span>绑定微信</span>
        <span>当前未绑定微信账号</span>
      </div>
      <el-button type="primary" text @click="changeAccount('WeChat')">更换绑定</el-button>
    </div>

    <div class="item">
      <i class="fa-solid fa-mobile-screen" style="color: #0d9488"></i>
      <div class="content">
        <span>绑定手机号</span>
        <span v-if="userStore.userInfo.phoneNumber">
          {{ userStore.userInfo.phoneNumber }}
        </span>
        <span v-else>当前未绑定手机号</span>
      </div>
      <el-button type="primary" text @click="changeAccount('Phone')">更换绑定</el-button>
    </div>

    <div class="item">
      <i class="fa-solid fa-envelope" style="color: #0d9488"></i>
      <div class="content">
        <span v-if="userStore.userInfo.email">
          {{ userStore.userInfo.email }}
        </span>
        <span v-else>当前未绑定绑定邮箱</span>
      </div>
      <el-button type="primary" text @click="changeAccount('EMail')">更换绑定</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/user.ts'
import { IAccountType } from '@/types/auth.ts'
import { ElMessage, ElMessageBox } from 'element-plus'
import { emailPattern, phonePattern } from '@/utils/element/elRules.ts'

const userStore = useUserStore()

const changeAccount = (type: IAccountType) => {
  switch (type) {
    case 'QQ':
    case 'WeChat':
      ElMessage.info('该功能暂未上线')
      break
    case 'Phone':
      ElMessageBox.prompt('请输入手机号', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        inputPattern: phonePattern,
        inputErrorMessage: '请输入正确的手机格式'
      })
        .then(({ value }) => {

        })
      break
    case 'EMail':
      ElMessageBox.prompt('请输入邮箱', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        inputPattern: emailPattern,
        inputErrorMessage: '请输入正确的邮箱格式'
      })
        .then(({ value }) => {

        })
      break
    default:
      break
  }
}
</script>
